<script setup lang="ts">
import JinDrawer from "@/components/framework/jin-drawer/jin-drawer.vue";
import { reactive, ref } from "vue";
import type {
  RoleAddType,
  RoleListType,
  RoleUpdateType,
} from "@/types/RoleType.ts";
import { FormInstance, Message } from "@arco-design/web-vue";
import type { FormRule } from "@/types/commonType.ts";
import useFormSubmit from "@/hooks/useFormSubmit.ts";
import { roleAddApi, roleUpdateApi } from "@/services/roleApi.ts";

const emits = defineEmits<{
  (e: "list"): void;
}>();

const drawer = ref<{
  init: () => void;
  close: () => void;
}>();

const formRef = ref<FormInstance>();

const handleSubmit = useFormSubmit(formRef);

const options = reactive({
  title: "",
  type: 0,
  loading: false,
});

const formData = reactive<RoleUpdateType>({
  id: "",
  description: "",
  roleCode: "",
  roleName: "",
});

const rules: FormRule<keyof RoleAddType> = {
  description: {
    required: false,
  },
  roleCode: {
    required: true,
    message: "请输入角色编码",
  },
  roleName: {
    required: true,
    message: "请输入角色名称",
  },
};

// 添加
const init = () => {
  options.loading = false;
  options.title = "新增角色";
  options.type = 0;
  drawer.value?.init();
  formData.id = null;
  formData.description = "";
  formData.roleCode = "";
  formData.roleName = "";
  formRef.value?.clearValidate();
};
// 修改
const edit = (row: RoleListType) => {
  options.loading = false;
  options.title = "编辑角色";
  options.type = 1;
  drawer.value?.init();
  formData.id = row.id;
  formData.description = row.description;
  formData.roleCode = row.roleCode;
  formData.roleName = row.roleName;
  formRef.value?.clearValidate();
};

const handleCancel = () => {
  drawer.value?.close();
};

const promise = (url, msg) => {
  url
    .then((res) => {
      if (res.code === 200) {
        emits("list");
        handleCancel();
        Message.success(msg);
      }
    })
    .finally(() => {
      options.loading = false;
    });
};
const handleOk = () => {
  const obj = JSON.parse(JSON.stringify(formData));
  // 添加
  if (options.type === 0) {
    delete obj.id;
    options.loading = true;
    promise(roleAddApi(obj), "新增成功");
  }
  // 修改
  if (options.type === 1) {
    options.loading = true;
    promise(roleUpdateApi(obj), "修改成功");
  }
};

defineExpose({
  init,
  edit,
});
</script>

<template>
  <jin-drawer
    :loading="options.loading"
    :width="500"
    :title="options.title"
    ref="drawer"
    @beforeOk="handleSubmit"
    @ok="handleOk"
    @cancel="handleCancel"
    :ok-loading="options.loading"
  >
    <a-form
      :model="formData"
      ref="formRef"
      :rules="rules"
    >
      <a-form-item
        field="roleName"
        label="角色名称"
      >
        <a-input
          allow-clear
          v-model.trim="formData.roleName"
          placeholder="请输入角色名称"
        />
      </a-form-item>
      <a-form-item
        field="roleCode"
        label="角色编码"
      >
        <a-input
          v-model.trim="formData.roleCode"
          placeholder="请输入角色编码"
        />
      </a-form-item>
      <a-form-item
        field="description"
        label="描述"
      >
        <a-textarea
          v-model="formData.description"
          placeholder="请输入角色描述"
        />
      </a-form-item>
    </a-form>
  </jin-drawer>
</template>

<style scoped lang="scss">
</style>